<template>
    <div class="mask">
        <ul v-if="!showColors">
            <li @click="changeMain" :style="{
                background: $store.state.backColor
            }">切换主题</li>
            <li :style="{
                background: $store.state.backColor
            }">下载数据</li>
            <li
            :style="{
                background: $store.state.backColor
            }">导入数据</li>
            <li
            :style="{
                background: $store.state.backColor
            }">编辑数据</li>
            <li
            :style="{
                background: $store.state.backColor
            }">清空数据</li>
        </ul>
        <transition name="slide">
            <ul v-if="showColors">
                <li :style="{
                    background: item
                }" @click="changeBackColor(item)" v-for="(item, i) in color" :key="i">{{item}}</li>
            </ul>
        </transition>
        
    </div>
</template>

<script>
import { mapMutations } from 'vuex'
export default {
    data() { 
        return {
            showColors: false,
            color: ['red', 'yellow', 'green', 'pink', 'blue']
        }
    },
    created() {
        this.$bus.$on('sendcolors', (data) => {
            this.showColors = data
        })
    },
    methods:{
        ...mapMutations(['changeBackColor']),
        changeMain() {
            this.showColors = true
        }
    }
 }
</script>

<style scoped lang="scss">
.mask {
    position: absolute;
    height: 100%;
    width: 100%;
    left: 0;
    top: 60px;
    background-color: rgba($color: #fff, $alpha: 1.0);
    ul {
        width: 80%;
        height: 100%;
        background-color: rgba($color: #000000, $alpha: 0.4);
        padding-top: 40px;
        li {
            width: 100px;
            color: #fff;
            text-align: center;
            line-height: 40px;
            border-radius: 4px;
            margin: 0 auto;
            margin-bottom: 20px;
            
        }
    }
}
.slide-enter, .slide-leave-to {
    transform: translateX(-80%);
}

.slide-enter-active, .slide-leave-active {
    transition: all .5s;
}
</style>